<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.6.0.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        .wrap {
            padding: 8px;
        }

        .list {
            margin-top: 10px;
        }

        .list li {
            height: 40px;
            line-height: 40px;
            text-indent: 10px;
            border: 1px dashed #333;
        }

        .list li+li {
            border-top: 0;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <h2 id="title">jquery元素获取</h2>
        <div class="list">
            <li class="first">01</li>
            <li>02</li>
            <li class="mid">03</li>
            <li>04</li>
            <li>05</li>
            <li class="last">06</li>
        </div>
        <div class="list">
            <li class="first">01</li>
            <li>02</li>
            <li class="mid">03</li>
            <li>04</li>
            <li>05</li>
            <li class="last">06</li>
        </div>
    </div>
</body>
<script>
    // 原生 
    // onload 等页面所有内容(文档 img css js )加载完毕之后 => 再执行函数内的代码
    // window.onload = function () {
    //     console.log("等页面所有内容加载完毕之后");
    // }

    // DOMContentLoaded   => 等文档内容加载完毕之后 => 执行再执行函数内的代码(此事件只能用事件监听绑定)
    // document.addEventListener("DOMContentLoaded", function () {
    //     console.log("等文档内容加载完毕之后");
    // })


    // jquery写法
    // 页面所有内容加载完毕
    // $(window).on("load", function () {
    //     console.log("等页面所有内容加载完毕之后");
    // })

    // 文档加载完毕
    // $(document).on("DOMContentLoaded", function () {
    //     console.log("等文档内容加载完毕之后");
    // })

    // 对on方法进行二次封装
    // $(document).ready(function () {
    //     console.log("等文档内容加载完毕之后");
    // })

    // $(function () {
    //     console.log("等文档内容加载完毕之后");
    // })

    // each
    // $(".list li").each(function (index, item) {
    //     console.log(this, item, index);
    // })

    // length
    // console.log($(".list li").length);

    // get()

    // index()  默认返回匹配的元素相对于所有同级元素的下标
    // index(selector)  可以接受一个选择器/dom元素集合 => 作为筛选范围 => 此时返回 匹配的元素相对于该范围的的下标
    // $(".list li").click(function () {
    //     // console.log($(this).index());
    //     console.log($(this).index(".list li"));
    // })

    // data()  可以在匹配的元素中存储一些数据 (1.在元素中不可见 2.键值可以是任意类型)
    // data(key,val)       对应键名设置数据
    // data(key)           对应键名获取数据
    // removeData(key)     对应键名删除数据

    var arr = [1, 2, 3];
    var obj = { a: 1, b: 2 };
    $(".list li").data("num", 100);
    $(".list li").data("str", "hello");
    $(".list li").data("bool", true);
    $(".list li").data("arr", arr);
    $(".list li").data("obj", obj);

    $(".list li").each(function (i) {
        $(this).data("index", i);
    })

    $(".list li").click(function () {
        console.log($(this).data("index"));
        console.log($(this).data("num"));
        console.log($(this).data("str"));
        console.log($(this).data("bool"));
        console.log($(this).data("arr"));
        console.log($(this).data("obj"));
    })

</script>

</html>